<template>
	<view class="container" v-if="datainfo!=null">
		<!-- 顶部交易成功 -->
		<!-- <view class="success">
			<view class="success-text">交易成功</view>
			<view class="success-icon"></view>
		</view> -->
		<!-- 地址物流栏 -->
		<view class="address-box">
			<!-- 物流状态 -->
			<!-- <view class="express" v-if="datainfo.order_status>2" >
				<view class="express-icon"></view>
				<view class="express-detail">
					<view>已签收，他人代收：菜鸟驿站，投递员:赵匡胤，电话：1568958968</view>
					<view class="time">2020-12-20</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
			<!-- 地址 -->
			<view class="address">
				<view class="add-icon-box">
					<image class="add-icon" src="../../static/user/address.png" mode="widthFix"></image>
				</view>
				<view class="add-detail">
					<text>{{datainfo.username}}</text>
					<text class="phone">{{datainfo.phone}}</text>
					<view class="add-info">{{datainfo.user_address}}</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="product-box">
			<view class="product-info">
				<view class="img">
					<image :src="datainfo.order_goods[0].image.file_path" mode="aspectFit"></image>
				</view>
				<view class="product-name-box">
					<view class="product-name">{{datainfo.order_goods[0].goods_name}}</view>
					<view class="product-specs">{{datainfo.order_goods[0].spec_value}}</view>
				</view>
				<view class="price-box">
					<view>{{datainfo.order_goods[0].total_price}}积分</view>
					<view class="num">x{{datainfo.order_goods[0].total_num}}</view>
				</view>
			</view>
			<view class="price">
				<text>实付款{{datainfo.total_price}}积分</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-box">
			<view class="order-title">订单详情</view>
			<view class="order-item">
				<text>订单编号:</text>
				<text class="right">{{datainfo.order_no}}</text>
			</view>
			<view class="order-item">
				<text>创建时间:</text>
				<text class="right">{{datainfo.create_time}}</text>
			</view>
			<view class="order-item">
				<text>付款时间:</text>
				<text class="right">{{datainfo.pay_time}}</text>
			</view>
			<!-- <view class="order-item">
				<text>发货时间:</text>
				<text class="right">2020-12-10 15:25:23</text>
			</view>
			<view class="order-item">
				<text>成交时间:</text>
				<text class="right">2020-12-11 15:25:23</text>
			</view> -->
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="btn-box">
			<view class="btn-item">
				<view class="btn">删除订单</view>
				<view class="btn">查看物流</view>
			</view>
			
		</view> -->
	</view>
</template>

<script>
	import{pay,orderinfo} from"../../api/product.js"
	export default {
		data() {
			return {
				id:null,
				datainfo:null
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getinfo()
		},
		methods: {
			// 订单详情
			async getinfo(){
				let res=await this.post(orderinfo,{
					user_id:uni.getStorageSync("userInfo").id,
					order_id:this.id
				})
				this.datainfo=res.data
			}
		}
	}
</script>

<style>
	page{
		background: #F1F1F1;
	}
	.container{
		padding-bottom: 30rpx;
		/* #ifdef H5 */
			padding-bottom: 100rpx;
		/* #endif */

	}
	.success{
		width: 750rpx;
		height: 199rpx;
		background: #DADADA;
		padding: 0 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.success-text{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.success-icon{
		width: 116rpx;
		height: 116rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.address-box{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx auto;
		padding: 30rpx;
	}
	.express{
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.express-icon{
		width: 44rpx;
		height: 44rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 50%;
	}
	.express-detail{
		width: 511rpx;
		height: 66rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}
	.time{
		font-size: 24rpx;
		margin-top: 14rpx;
	}
	.address{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.add-icon-box{
		width: 44rpx;
		height: 44rpx;
	}
	.add-icon{
		width: 44rpx;
		height: 44rpx;
	}
	.add-detail{
		margin-left: 34rpx;
		font-size: 24rpx;
		width: 600rpx;
		font-weight: bold;
		color: #000000;
	}
	.add-info{
		margin-top: 14rpx;
	}
	.phone{
		margin-left: 30rpx;
		color: #999999;
		font-weight: 500;
	}
	.product-box{
		width: 690rpx;
		height: 313rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx auto;
		padding: 30rpx 20rpx;
	}
	.product-info{
		display: flex;
	}
	.img{
		width: 163rpx;
		height: 163rpx;
	}
	.img>image{
		width: 163rpx;
		height: 163rpx;
	}
	.product-name-box{
		width: 320rpx;
		height: 163rpx;
		margin-left: 20rpx;
	}
	.product-name{
		width: 295rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		overflow: hidden;  
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical; 
	}
	.product-specs{
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
		margin-top: 50rpx;
	}
	.price-box{
		/* width: 123rpx; */
		font-size: 28rpx;
		font-weight: 400;
		color: #575757;
	}
	.num{
		width: 123rpx;
		text-align: right;
	}
	.price{
		margin-top: 50rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 500;
		color: #575757;
	}
	.total{
		color: #999999;
	}
	.order-box{
		width: 690rpx;
		/* height: 362rpx; */
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx auto;
		padding: 30rpx 20rpx;
	}
	.order-title{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.order-item{
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 20rpx;
	}
	.right{
		margin-left: 65rpx;
	}
	.btn-box{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		font-size: 24rpx;
		font-weight: 100;
		color: #575757;
		align-items: center;
	}
	.btn{
		width: 134rpx;
		height: 50rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 30rpx;
		text-align: center;
		line-height: 50rpx;
		margin-right: 30rpx;
	}
	.btn-item{
		display: flex;
		align-items: center;
		margin-left: auto;
	}
</style>
